<template>
  <div class="order_item_part">
    <div class="info_part">
        <div class="atavar_part">
            <PreviewImg style="height: 100%;width: 100%;" :src="data.inService" alt=""/>
        </div>
        <div style="font-weight: 700;'font-size: 13px;">
            <div class="person_part">
                <div style="width: 50px;">{{ data.serviceObjectName||'/' }}</div>
                <div class="tag_part" style="color: #19FCDE;">服务对象</div>
            </div>
            <div class="person_part">
                <div style="width: 50px;">{{ data.waiterServiceName||'/' }}</div>
                <div class="tag_part" style="background-color: #16C8FFaa;color: #16C8FF;">服务员</div>
            </div>
        </div>
        <div class="call_part" @click="visible=true">
            <img style="height:20px;width:20px;" :src="headset" alt="">
            回访
        </div>
    </div>
    <div style="margin-top: 20px;">服务项目：{{ data.serviceItemName }}
    </div>
    <div style="margin-top: 20px;">服务开始时间：{{ data.orderStartTime }}</div>
  </div>
    <AplidDialog v-model="visible" width="60%"  @close="dialogClose" @open="dialogOpen">
      <TabCheck v-model="activeName" :tabs="tabList"></TabCheck>
    </AplidDialog>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted} from 'vue'
import headset from '@/assets/imgs/icon-hom1/headset.png'
import PreviewImg from '@/components/PreviewImg/index.vue'
// import DialogPart from '@/views/Home2/components/dialogPart/index.vue'
import TabCheck from '@/views/aplid/TabCheck/index.vue'
import tu1 from '@/assets/imgs/icon-hom1/tu1.png'
import tu2 from '@/assets/imgs/icon-hom1/tu2.png'
import tu3 from '@/assets/imgs/icon-hom1/tu3.png'
import tu4 from '@/assets/imgs/icon-hom1/tu4.png'

let emit = defineEmits(['dialogClose','dialogOpen'])
let props = defineProps({
    data:{
        type:Object,
        default:()=>({})
    }
})
let visible = ref(false)
let showDialog = ref(false)
const activeName = ref(1);
const tabList = [
  { label: "1. 坐席线上核查", value: 1 ,icon:tu1},
  { label: "2. 线上呼叫", value: 2 ,icon:tu2},
  { label: "3. 核查内容记录", value: 3 ,icon:tu3},
  { label: "4. 核查汇总", value: 4 ,icon:tu4},
];
const dialogClose = () =>{
    emit('dialogClose')
}
const dialogOpen = () =>{
    emit('dialogOpen')
}
</script>
<style scoped lang="scss">
.call_part{
    width: 61px;
    height: 22px;
    border-radius: 4px;
    background:#11948E;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    cursor: pointer;
}
.person_part{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 5px;
}
.tag_part{
    margin-left: 20px;
    margin-right: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 61px;
    height: 22px;
    border-radius: 11px;
    background: #19fcdeaa;
}
.order_item_part{
    height: 100%;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    font-weight: 400;
    font-size: 12px;
}
.atavar_part{
    height: 44px;
    width: 44px;
    background-color: #8697A0;
    margin-right: 20px;
}
.info_part{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
</style>